<h1>颜色选择器</h1>
<meta name=viewport content="width=device-width">
<title>颜色选择器</title>
<div>颜色预览</div>
<style>
.rgbinp {width: 255px}
#colout {width:255px;height:255px}
</style>
<div id=colout style="border: 1px solid #000;"><script>
document.write("<br><br><br>")</script></div>
<div>颜色选择<br />
R <input type=range class=rgbinp min=0 max=255 value=0> <span class=rgbout></span><br>
G <input type=range class=rgbinp min=0 max=255 value=0> <span class=rgbout></span><br>
B <input type=range class=rgbinp min=0 max=255 value=0> <span class=rgbout></span><br>
<pre style="background-color:#7fcaff;width:80px;text-align:center;" onclick="randomVal()">
随机</pre>
当前颜色: <span id=nowcolor style="color:blue" contenteditable></span><br></div>

<script>
rgbinp=document.querySelectorAll(".rgbinp")
rgbout=document.querySelectorAll(".rgbout")
for(let i=0;i<rgbinp.length;i++){
rgbinp[i].oninput=function(){
rgbout[0].innerHTML=rgbinp[0].value
rgbout[1].innerHTML=rgbinp[1].value
rgbout[2].innerHTML=rgbinp[2].value
try{
var list=["#"]
list.push(testLength(parseInt(rgbinp[0].value,10).toString(16),2))
list.push(testLength(parseInt(rgbinp[1].value,10).toString(16),2))
list.push(testLength(parseInt(rgbinp[2].value,10).toString(16),2))
var rrggbb=list.join("")
colout.style.backgroundColor="rgb("+rgbinp[0].value+","+rgbinp[1].value+","+rgbinp[2].value+")";
nowcolor.innerHTML=rrggbb
}catch(e){alert(e)}
return rrggbb
}
}
function testLength(str,lth=0){
if(str.length<lth) {
return "0"+str;
} else {
return str;
}}
function randomVal(){
var r=getRandom(0,255),g=getRandom(0,255),b=getRandom(0,255);
var rgb=[r,g,b]
for(i=0;i<3;i++){
rgbinp[i].value=rgbout[i].innerHTML=rgb[i]
}
rgbinp[0].oninput()
}
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

nowcolor.oninput=function(){
var a=this.innerHTML
var no7
colout.style.backgroundColor=a
//if(a.length!=7&&a.length!=4) no7="请输入#xxxxxx的颜色值!";
a=a.replace("#","")
var b,c,d
b=a.substr(0,2)
c=a.substr(2,2)
d=a.substr(4,2)
var list=[b,c,d]
list[0]=parseInt(list[0],16)
list[1]=parseInt(list[1],16)
list[2]=parseInt(list[2],16)
for(i=0;i<3;i++){
rgbinp[i].value=rgbout[i].innerHTML=no7||list[i]
}
}

rgbinp[0].oninput()
</script>
